<template>
    <div class="my-tag">
      <input 
        v-if="isShow"
        v-focus
        :value="value"
        class="input"
        type="text"
        placeholder="输入标签"
        @blur="isShow=false"
        @keyup.enter="changeTag"
      />
      <div class="text" v-else @dblclick="isShow=true">
        {{ value }}
      </div>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      value: String
    },
    data() {
      return {
        isShow: false
      }
    },
    methods: {
      changeTag(e) {
        if (e.target.value.trim() === ''){
          alert('请输入修改内容')
          return
        }
        this.isShow = false
        // 修改父组件数据
        this.$emit('input', e.target.value)
      }
    },
  }
  </script>
  
  <style scoped></style>
  